<template>
    <div style="width:100%;overfllow:auto;">
        <component :is="childControl" 
            v-for="(item,ix) in pageData" :key="item"
            style="width:100%;" 
            v-bind="childAttrs" v-model="modelValue[pos + ix]" />


        <el-pagination
            :layout="$mbh5? 'prev, next': 'total, prev, pager, next,jumper'"
            background
            v-model:current-page="pageIndex"
            :page-size="pageSize"
            :total="modelValue.length"
            hide-on-single-page
        ></el-pagination>
        
        <div v-if="!disabled" style="margin-top: 10px">
            <el-button
                v-if="allowDelete"
                type="danger"
                :disabled="multipleSelection.length == 0"
                
                @click="handleDel"
                >删除</el-button>
            <el-button v-if="allowAdd" type="default"  @click="handleAdd">添加</el-button>
        </div>
    </div>

</template>

<script>
import { computed, inject } from 'vue-demi'
export default {
    name:"MyList",
    props:{
        pageSize:{
            type:Number,
            default:10
        },
        modelValue: {
            type: Array,
            default: [],
        },
        disabled: Boolean,
        childControl:{
            type:String,
            required:true
        },
        childAttrs:Object,
        allowAdd:{
            type:Boolean,
            default:true
        },
        allowDelete:{
            type:Boolean,
            default:true
        },
    },
    emits:["update:modelValue"],
    setup(props){
        const pageIndex = ref(1);

        const pos = computed(()=> (pageIndex-1) * props.pageSize);
        const pageData = computed(()=>{
            const ent = pos + props.pageSize;
            return props.modelValue.slice(pos, end);
        });
        return {pageIndex, pos, pageData};
    }
}
</script>